<template>
  <div id="J-slider-banner" class="slider-container">
    <el-carousel height="440px">
      <el-carousel-item v-for="item in banners" :key="item.id">
        <div class="image" :style="{backgroundImage: 'url(' + item.image+ ')'}"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import { banners } from '@/api/home'
export default {
  name: 'NavBg',
  data () {
    return {
      banners: []
    }
  },
  created () {
    this.fetchBanner()
  },
  methods: {
    async fetchBanner () {
      const type = {
        type: 'pc_home'
      }
      const res = await banners(type)
      this.banners = res
    }
  }
}
</script>
<style lang="scss" scoped>
  .slider-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    direction: ltr;
    min-width: 1200px;
    height: 530px;
    margin-top: -45px;
    /*background: url('../assets/img/swiper_bg1.jpg') no-repeat;*/
    z-index: 1;
    .image {
      width: 100%;
      height: 100%;
      background-position: center;
    }
  }
  .el-carousel{
    margin-top: 45px !important;
  }
</style>
